<template>
    <div>
        <!-- 1简单案例-->
        <!-- <SlotSimple></SlotSimple>
        <SlotSimple>
            <button>slot one btn</button>
        </SlotSimple> -->
        <!-- 2具名插槽 -->
        <!-- <SlotName>
            <template #default>
                <h3>default</h3>
            </template>
            <template v-slot:center>
                <h3>center</h3>
            </template>
            <template v-slot:[name]>
                <h3>right</h3>
            </template>
        </SlotName> -->
        <!-- 3.传参 -->
        <SlotProps>
            <template v-slot:left="props">
                <p>{{ props.i }} - {{ props.k }} - {{ props.v }}</p>
            </template>
            <template v-slot:center="props">
                <p>{{ props.i }} - {{ props.k }} - {{ props.v }}</p>
            </template>
            <!-- v-slot:可以简写为# -->
            <template #right="props">
                <p>{{ props.i }} - {{ props.k }} - {{ props.v }}</p>
            </template>
        </SlotProps>
    </div>
</template>

<script>
import SlotProps from "./components/SlotProps.vue";
export default {
    components: {
        SlotProps,
    },
}
// // import SlotSimple from './components/SlotSimple.vue';
// // import SlotName from './components/SlotName.vue';
// export default {
//     data() {
//         return {
//             name: 'right'
//         }
//     },
//     components: {
//         // SlotSimple,
//         // SlotName,
//     },
// }
</script>

<style scoped></style>